<template>
  <div class="contaienr">
    <div class="bg-primary bg ">
      <div class="avatar-box ">
        <van-image
          width="6rem"
          height="6rem"
          fit="cover"
          round
          :src="user.avatar"
        />
        <div class="" >
          <p>{{user.nickname}}</p>
          <p>
            <span class="margin-right-sm">{{ownerLevel}}</span>
            <span>{{ownerth.owner_serial}}</span>
          </p>
        </div>
      </div>
      <div class="prospect bg-white">
        <div class="myteam">
          <p class="margin-top-xs fl margin-left-sm">我的团队</p>
        </div>
        <div class="flex justify-around team-box margin-top-sm">
          <div @click="navTo({path:'/process',query:{active:'a'}})">
            <span class="number">{{processed}}</span>
            <br />
            <span class="text-grey text-df">已审核</span>
          </div>
          <div @click="navTo({path:'/process',query:{active:'b'}})">
            <span class="number">{{pending}}</span>
            <br />
            <span class="text-grey text-df">待审核</span>
          </div>
          <div @click="navTo({path:'/process',query:{active:'c'}})">
            <span class="number">{{notRent}}</span>
            <br />
            <span class="text-grey text-df">未出租</span>
          </div>
          <div @click="navTo({path:'/process',query:{active:'d'}})">
            <span class="number">{{ownerth.shops_num}}</span>
            <br />
            <span class="text-grey text-df">已出租</span>
          </div>
          <div >
            <span class="number">{{ownerth.shops_max}}</span>
            <br />
            <span class="text-grey text-df">全部店铺</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 功能栏 -->

    <div class="features">
      <div class="box flex justify-between" @click="navTo({path:'/team',query:{active:'a'}})">
        <div class=" margin-left-sm left flex">
          <div class="margin-right-xs"><van-icon name="label" color="#38c1b4" size=20 /></div>
          <div><span>邀请店主</span></div>
        </div>
        <van-icon name="arrow" size=20 />
      </div>
      <div class="box flex justify-between" @click="navTo({path:'/team',query:{active:'b'}})">
        <div class=" margin-left-sm left flex">
          <div class="margin-right-xs"><van-icon name="friends" color="#fda702" size=20 /></div>
          <div><span>我的团队</span></div>
        </div>
        <van-icon name="arrow" size=20 />
      </div>
      <div class="box flex justify-between" @click="toast">
        <div class=" margin-left-sm left flex">
          <div class="margin-right-xs"><van-icon name="label" color="#38c1b4" size=20 /></div>
          <div><span>邀约业主</span></div>
        </div>
        <van-icon name="arrow" size=20 />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  mounted() {
    console.log("this", this)
   this.getOwnerth()
  },
  data() {
    return {
      ownerth: {
        owner_level: "",
        owner_serial: "",
        shops_max: "",
        shops_num: ""
      },
      user: {
        avatar: "",
        nickname: ""
      },
      pending: 0,
      processed: 0
    };
  },
  computed: {
    ownerLevel() {
      let level = this.ownerth.owner_level;
      switch (level) {
        case 1:
          level = "创业型业主";
          break;
        case 2:
          level = "小型业主";
          break;
        case 3:
          level = "中型业主";
          break;
        case 4:
          level = "大型业主";
          break;
        case 5:
          level = "VIP业主";
      }
      return level;
    },
    notRent() {
      let notRent = this.ownerth.shops_max - this.ownerth.shops_num;
      return notRent;
    }
  },
  methods: {
    // 请求用户数据
 async  getOwnerth() {
        
     await this.$ajax.get({ url: "App/ownerst" }).then(res => {
        // console.log("res", res)
        if (res.status_code === 200) {
          let { ownerth, user, pending, processed } = res.data
          this.ownerth = ownerth
          this.user = user
          this.pending = pending
          this.processed = processed
        }
      })
    },
    // 跳转
    navTo(obj){
        console.log('obj',obj)
        this.$router.push(obj)
    },
    toast(){
      this.$toast('功能内测中')
    }
  }
}
</script>

<style lang="scss" scoped >
.contaienr {
  width: 100%;
  height: 100%;
}
.bg {
  height: 250px;
  position: relative;
  .prospect {
    top:180px;
    border-radius: 10px;
    width: 92%;
    height: 140px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 5px #cccccc;

    .myteam {
      font-size: 18px;
      height: 50px;
      line-height: 50px;
    }
    .team-box {
      height: 90px;
      div {
        height: 80px;
        width: 16%;
      }
      :last-child {
        width: 20%;
      }
    }
  }
}
.number {
  font-size: 30px;
}
// 功能栏
.features {
  margin-top: 100px;
  position: absolute;
  width: 92%;
  height: 200px;
  left: 50%;
  transform: translateX(-50%);
  .box {
    width: 100%;
    position: relative;
    margin-top: 5px;
    height: 50px;
    box-shadow: 0px 1px 2px #cccccc;
    top: 0px;
    border-radius:10px;
    .left{
        line-height: 50px;
        :first-child{
            line-height: 50px;
        }
        :last-child{
            line-height: 50px;
        }
    }
    :last-child{
        line-height: 50px;
    }
  }
}
.avatar-box{
  position: absolute;
  left: 50%;
transform: translateX(-50%);
  margin-top: 18px;
}
</style>